<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="出港结算明细" name="first">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form ref="mxForm" :model="mxForm" label-width="100px" class="flex">
                    <el-form-item label="运单号" style="margin-left: 10px">
                      <el-input
                        v-model="mxForm.transportCodes"
                        placeholder="最多输入1000条"
                        style="width: 286px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="所属网点" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.networkNameId"
                        placeholder="请选择所属网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="时间范围" style="margin-left: 10px">
                      <el-date-picker
                        v-model="Time"
                        type="datetimerange"
                        @change="dateChange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-left: 15px">
                      <el-button type="primary" @click="mxSearch">查询</el-button>
                      <el-button @click="mxClear">重置</el-button>
                    </el-form-item>
                    <el-form-item label="异常数据" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.abnormalDatald"
                        placeholder="请选择异常数据"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in AbnormalList"
                          :key="item.id"
                          :label="item.abnormalData"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="结算" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.settleType"
                        placeholder="请选择结算类型"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in SettleTypeList"
                          :key="item.id"
                          :label="item.settleType"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="结算对象" style="margin-left: 10px">
                      <el-input
                        v-model="mxForm.settleObject"
                        placeholder="请输入结算对象"
                        style="width: 286px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="父客户" style="margin-left: 10px">
                      <el-input
                        v-model="mxForm.parentCustomer"
                        placeholder="请选择父客户"
                        style="width: 286px"
                      ></el-input>
                    </el-form-item>

                    <!-- <el-collapse accordion>
                      <el-collapse-item title="展开查询">
                        <div style="display: flex; flex-wrap: wrap"> -->
                    <el-form-item label="网点对比" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.networkCompare"
                        placeholder="请选择网点对比"
                        style="width: 286px"
                      >
                        <el-option label="所属网点产面单/订单网点" value="1"></el-option>
                        <el-option label="所属网点收件网点" value="2"></el-option>
                        <el-option label="收件网点面单/订单网点" value="3"></el-option>
                        <el-option label="收件网点为空" value="4"></el-option>
                        <el-option label="面单/订单网点为空" value="5"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="所属业务员" style="margin-left: 10px">
                      <el-input
                        v-model="mxForm.salesman"
                        placeholder="请选择所属业务员"
                        style="width: 286px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="客户结算周期" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.customerSettlementCycle"
                        placeholder="请选择客户结算周期"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in PayTypeList"
                          :key="item.id"
                          :label="item.payType"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="订单客户" style="margin-left: 10px">
                      <el-input
                        v-model="mxForm.orderCustomer"
                        placeholder="请选择订单客户"
                        style="width: 286px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="锁定状态" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.lockStatus"
                        placeholder="请选择锁定状态"
                        style="width: 286px"
                      >
                        <el-option label="已锁定" value="已锁定"></el-option>
                        <el-option label="未锁定" value="未锁定"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="有效状态" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.effectiveStatus"
                        placeholder="请选择有效状态"
                        style="width: 286px"
                      >
                        <el-option label="有效" value="有效"></el-option>
                        <el-option label="无效" value="无效"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="收件网点" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.receivingNetworkId"
                        placeholder="请选择收件网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="面单/订单网点" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.orderNetworkId"
                        placeholder="请选择面单/订单网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="付费标识" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.payType"
                        placeholder="请选择付费标识"
                        style="width: 286px"
                      >
                        <el-option label="月结" value="月结"></el-option>
                        <el-option label="现付" value="现付"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="加盟方式" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.contractAreaJoin"
                        placeholder="请选择加盟方式"
                        style="width: 286px"
                      >
                        <el-option label="直营" value="直营"></el-option>
                        <el-option label="非直营" value="非直营"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="到出港中心" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.toCenter"
                        placeholder="请选择到出港中心"
                        style="width: 286px"
                      >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="出港中心" style="margin-left: 10px">
                      <el-input
                        v-model="mxForm.orderCustomer"
                        placeholder="请选择订单客户"
                        style="width: 286px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="是否同城件" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.isSameCity"
                        placeholder="请选择"
                        style="width: 286px"
                      >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="目的省份" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.destinationProvince"
                        placeholder="请选择目的省份"
                        @change="provinceChange"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in ProvinceList"
                          :key="item.id"
                          :label="item.province"
                          :value="{ pid: item.pid, province: item.province }"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="目的城市" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.destinationCity"
                        placeholder="请选择目的城市"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in cityList"
                          :key="item.id"
                          :label="item.city"
                          :value="item.city"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="结算最小重量" style="margin-left: 10px">
                      <el-input-number
                        v-model="mxForm.minweight"
                        controls-position="right"
                        :min="-999999"
                        :max="999999999"
                        placeholder="请输入最小重量"
                        style="width: 286px"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="结算最大重量" style="margin-left: 10px">
                      <el-input-number
                        v-model="mxForm.maxWeight"
                        controls-position="right"
                        :min="-999999"
                        :max="999999999"
                        placeholder="请输入最大重量"
                        style="width: 286px"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="本网点集包" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.isFocusPackageNetwork"
                        placeholder="请选择是或否"
                        style="width: 286px"
                      >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="人工补录" style="margin-left: 10px">
                      <el-select
                        v-model="mxForm.isManualRecord"
                        placeholder="请选择是或否"
                        style="width: 286px"
                      >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                    <!-- </div>
                      </el-collapse-item>
                    </el-collapse> -->
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div>当前页共{{ mxtotal }}项</div>
              </el-col>
              <el-col :span="2">
                <div>
                  <el-button type="primary">查询</el-button>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <el-table
                  :data="mxTableData"
                  :cell-style="{ textAlign: 'center' }"
                  :header-cell-style="{ textAlign: 'center' }"
                  border
                  style="width: 100%"
                >
                  <el-table-column fixed prop="createTime" label="业务时间" width="150">
                  </el-table-column>
                  <el-table-column fixed prop="transportCode" label="运单号" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="networkName.networkName"
                    label="所属网点"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="networkSettleType.settleType"
                    label="结算类型"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="settleObject" label="结算对象" width="300">
                  </el-table-column>
                  <el-table-column prop="dataHandleTip" label="数据处理提示" width="120">
                  </el-table-column>
                  <el-table-column prop="collectMoney" label="应收金额" width="120">
                  </el-table-column>
                  <el-table-column prop="transportMoney" label="中转费/运费" width="120">
                  </el-table-column>
                  <el-table-column prop="appendMoney" label="附加费" width="120">
                  </el-table-column>
                  <el-table-column prop="extraMoney" label="加收费" width="120">
                  </el-table-column>
                  <el-table-column prop="precharge" label="预收面单费" width="120">
                  </el-table-column>
                  <el-table-column prop="settleWeigh" label="结算重量" width="120">
                  </el-table-column>
                  <el-table-column prop="province" label="目的省份" width="120">
                  </el-table-column>
                  <el-table-column prop="city" label="目的城市" width="120">
                  </el-table-column>
                  <el-table-column prop="transportType" label="运输方式" width="120">
                  </el-table-column>
                  <el-table-column prop="freightType" label="物品类别" width="120">
                  </el-table-column>
                  <el-table-column prop="payType" label="付费方式" width="120">
                  </el-table-column>
                  <el-table-column prop="expressSheetSource" label="面单来源" width="120">
                  </el-table-column>
                  <el-table-column prop="expressSheetType" label="面单类别" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="alreadyReceiveMoney"
                    label="预付款已收金额"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="disbursementMoney"
                    label="已出账金额"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="networkWeigh" label="网点称重" width="120">
                  </el-table-column>
                  <el-table-column prop="centreWeigh" label="中心称重" width="120">
                  </el-table-column>
                  <el-table-column prop="volumeWeigh" label="体积重" width="120">
                  </el-table-column>
                  <el-table-column prop="lengthWidthHeight" label="长宽高" width="120">
                  </el-table-column>
                  <el-table-column prop="settleWeigh" label="总部结算重量" width="120">
                  </el-table-column>
                  <el-table-column prop="weigh" label="重量" width="120">
                  </el-table-column>
                  <el-table-column prop="averageWeigh" label="均重" width="120">
                  </el-table-column>
                  <el-table-column prop="pullAverageType" label="拉均方式" width="120">
                  </el-table-column>
                  <el-table-column prop="averageWeighSign" label="均重标识" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="destinationProvince"
                    label="订单目的省份"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="isFromXinjiang" label="是否新疆直发" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="destinationCity"
                    label="订单目的城市"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="centreNextStation"
                    label="中心下一站"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="signProvince" label="签收省份" width="120">
                  </el-table-column>
                  <el-table-column prop="startCity" label="签收城市" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="customerSettlementId"
                    label="客户结算周期"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="parentCustomer" label="父客户" width="120">
                  </el-table-column>
                  <el-table-column prop="salesman" label="所属业务员" width="120">
                  </el-table-column>
                  <el-table-column prop="contractAreaType" label="承包区类型" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="contractAreaJoin"
                    label="承包区加盟方式"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="lastStation" label="上一站" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="receivingNetwork.networkName"
                    label="收件网点"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="receivingPeople" label="收件员" width="120">
                  </el-table-column>
                  <el-table-column prop="payType" label="订单/面单网点" width="120">
                  </el-table-column>
                  <el-table-column prop="orderCustomer" label="订单客户" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="printPeople"
                    label="面单发放对象/打单员"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="leaveCentre" label="出港中心" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="focusPackageNetworkId"
                    label="集包网点"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="packageCode" label="包号" width="120">
                  </el-table-column>
                  <el-table-column prop="signNetwork" label="签约网点" width="120">
                  </el-table-column>
                  <el-table-column prop="remark" label="备注" width="120">
                  </el-table-column>
                  <el-table-column prop="startProvince" label="始发省份" width="120">
                  </el-table-column>
                  <el-table-column prop="startCity" label="始发城市" width="120">
                  </el-table-column>
                  <el-table-column prop="sender" label="寄件人" width="120">
                  </el-table-column>
                  <el-table-column prop="sendAddress" label="寄件地址" width="120">
                  </el-table-column>
                  <el-table-column prop="offerId" label="报价ID" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="unpaidInvoiceMoney"
                    label="未收面单费"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="signTime" label="签收时间" width="120">
                  </el-table-column>
                  <el-table-column prop="effectiveStatus" label="有效状态" width="120">
                  </el-table-column>
                  <el-table-column prop="lockStatus" label="锁定状态" width="120">
                  </el-table-column>
                  <el-table-column prop="lockBy" label="锁定/解锁人" width="120">
                  </el-table-column>
                  <el-table-column prop="lockTime" label="锁定/解锁时间" width="120">
                  </el-table-column>
                  <el-table-column prop="updateBy" label="修改人" width="120">
                  </el-table-column>
                  <el-table-column prop="updateTime" label="修改时间" width="120">
                  </el-table-column>
                  <el-table-column prop="isSendDoor" label="送货上门" width="120">
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: end">
              <el-pagination
                @size-change="mxhandleSizeChange"
                @current-change="mxhandleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="mxtotal"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="承包区中转费汇总" name="second">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form ref="cbForm" :model="cbForm" label-width="100px" class="flex">
                    <el-form-item label="汇总维度">
                      <el-select
                        v-model="cbForm.collectType"
                        placeholder="请选择汇总维度"
                        @change="handleDimensionalityChange"
                        style="width: 286px"
                      >
                        <el-option label="月汇总" value="2"></el-option>
                        <el-option label="日汇总" value="1"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="时间范围">
                      <el-date-picker
                        v-model="cbForm.month"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择月"
                        range-separator="至"
                        v-show="show == 2"
                        style="width: 672px"
                      >
                      </el-date-picker>

                      <el-date-picker
                        v-model="Time"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="cbdateChange"
                        v-show="show == 1"
                        style="width: 672px"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="所属网点">
                      <el-select
                        v-model="cbForm.networkNameId"
                        placeholder="请选择所属网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 15px">
                      <el-button type="primary" @click="cbSearch">查询</el-button>
                      <el-button @click="cbClear">重置</el-button>
                    </el-form-item>
                    <el-form-item label="承包区">
                      <el-input
                        v-model="cbForm.settleObject"
                        placeholder="请输入承包区"
                        style="width: 286px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="加盟方式">
                      <el-select
                        v-model="cbForm.contractAreaJoin"
                        placeholder="请选择加盟方式"
                        style="width: 286px"
                      >
                        <el-option label="直营" value="直营"></el-option>
                        <el-option label="非直营" value="非直营"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="承包区类型">
                      <el-select
                        v-model="cbForm.contractAreaType"
                        placeholder="请选择活动区域"
                        style="width: 286px"
                      >
                        <el-option label="承包区" value="承包区"></el-option>
                        <el-option label="虚拟承包区" value="虚拟承包区"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div>当前页共{{ cbtotal }}项</div>
              </el-col>
              <el-col :span="2">
                <div>
                  <el-button type="primary">查询</el-button>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <el-table
                  :data="cbTableData"
                  :cell-style="{ textAlign: 'center' }"
                  :header-cell-style="{ textAlign: 'center' }"
                  border
                  style="width: 100%"
                >
                  <el-table-column fixed prop="collectTime" label="汇总日期" width="150">
                  </el-table-column>
                  <el-table-column
                    fixed
                    prop="networkNameId"
                    label="网点名称"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="contractAreaName" label="承包区名称" width="120">
                  </el-table-column>
                  <el-table-column prop="contractAreaType" label="承包区类型" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="contractAreaJoinType"
                    label="承包区加盟方式"
                    width="300"
                  >
                  </el-table-column>
                  <el-table-column prop="totalTicket" label="总票数" width="120">
                  </el-table-column>
                  <el-table-column prop="abnormalTicket" label="异常票数" width="120">
                  </el-table-column>
                  <el-table-column prop="totalweight" label="总重量" width="120">
                  </el-table-column>
                  <el-table-column prop="transferFee" label="中转费" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="advancePaymentMoney"
                    label="预付款扣款金额"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="advancePaymentTicket"
                    label="预付款已扣款票数"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="advancePaymentUncoveredTicket"
                    label="预付款未扣款票数"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="additionFee" label="附加费" width="120">
                  </el-table-column>
                  <el-table-column prop="extraFee" label="加收费" width="120">
                  </el-table-column>
                  <el-table-column prop="receivableAmount" label="应收金额" width="120">
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: end">
              <el-pagination
                @size-change="cbhandleSizeChange"
                @current-change="cbhandleCurrentChange"
                :current-page="currentPage2"
                :page-sizes="[10, 30, 40, 50]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="cbtotal"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="业务员中转费汇总" name="third"
            ><el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form
                    ref="ywyForm"
                    :model="ywyForm"
                    label-width="100px"
                    class="flex"
                  >
                    <el-form-item label="汇总维度">
                      <el-select
                        v-model="ywyForm.collectType"
                        placeholder="请选择汇总维度"
                        @change="handleDimensionalityChange"
                        style="width: 286px"
                      >
                        <el-option label="月汇总" value="2"></el-option>
                        <el-option label="日汇总" value="1"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="时间范围">
                      <el-date-picker
                        v-model="ywyForm.month"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择月"
                        range-separator="至"
                        v-show="show == 2"
                        style="width: 672px"
                      >
                      </el-date-picker>

                      <el-date-picker
                        v-model="Time"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="ywydateChange"
                        v-show="show == 1"
                        style="width: 672px"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="所属网点">
                      <el-select
                        v-model="ywyForm.networkNameId"
                        placeholder="请选择所属网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 15px">
                      <el-button type="primary" @click="ywySearch">查询</el-button>
                      <el-button @click="ywyClear">重置</el-button>
                    </el-form-item>
                    <el-form-item label="业务员">
                      <el-input
                        v-model="ywyForm.receivingPeople"
                        placeholder="请输入业务员"
                        style="width: 286px"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div>当前页共{{ ywytotal }}项</div>
              </el-col>
              <el-col :span="2">
                <div>
                  <el-button type="primary">查询</el-button>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <el-table
                  :data="ywyTableData"
                  :cell-style="{ textAlign: 'center' }"
                  :header-cell-style="{ textAlign: 'center' }"
                  border
                  style="width: 100%"
                >
                  <el-table-column fixed prop="collectTime" label="汇总日期" width="150">
                  </el-table-column>
                  <el-table-column
                    fixed
                    prop="networkNameId"
                    label="网点名称"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="receivingPeople" label="业务员名称" width="120">
                  </el-table-column>
                  <el-table-column prop="totalTicket" label="总票数" width="120">
                  </el-table-column>
                  <el-table-column prop="abnormalTicket" label="异常票数" width="300">
                  </el-table-column>
                  <el-table-column prop="totalweight" label="总重量" width="120">
                  </el-table-column>
                  <el-table-column prop="transferFee" label="中转费" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="advancePaymentMoney"
                    label="预付款已收金额"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="advancePaymentTicket"
                    label="预付款已扣款票数"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="advancePaymentUncoveredTicket"
                    label="预付款未扣款票数"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="additionFee" label="附加费" width="120">
                  </el-table-column>
                  <el-table-column prop="extraFee" label="加收费" width="120">
                  </el-table-column>
                  <el-table-column prop="receivableAmount" label="应收金额" width="120">
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: end">
              <el-pagination
                @size-change="ywyhandleSizeChange"
                @current-change="ywyhandleCurrentChange"
                :current-page="currentPage3"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="ywytotal"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="客户运费汇总" name="fourth"
            ><el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form ref="khForm" :model="khForm" label-width="100px" class="flex">
                    <el-form-item label="汇总维度">
                      <el-select
                        v-model="khForm.collectType"
                        placeholder="请选择汇总维度"
                        @change="handleDimensionalityChange"
                        style="width: 286px"
                      >
                        <el-option label="月汇总" value="2"></el-option>
                        <el-option label="日汇总" value="1"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="时间范围">
                      <el-date-picker
                        v-model="khForm.month"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择月"
                        range-separator="至"
                        v-show="show == 2"
                        style="width: 672px"
                      >
                      </el-date-picker>

                      <el-date-picker
                        v-model="Time"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="khdateChange"
                        v-show="show == 1"
                        style="width: 672px"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="所属网点">
                      <el-select
                        v-model="khForm.networkNameId"
                        placeholder="请选择所属网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 15px">
                      <el-button type="primary" @click="khSearch">查询</el-button>
                      <el-button @click="khClear">重置</el-button>
                    </el-form-item>
                    <el-form-item label="客户名称">
                      <el-input
                        v-model="khForm.settleObject"
                        placeholder="请输入客户名称"
                        style="width: 286px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="父客户">
                      <el-input
                        v-model="khForm.parentCustomer"
                        placeholder="请输入父客户"
                        style="width: 286px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="客户结算类型">
                      <el-select
                        v-model="khForm.customerSettlementId"
                        placeholder="请选择客户结算周期"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in PayTypeList"
                          :key="item.id"
                          :label="item.payType"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="出账状态">
                      <el-select
                        v-model="khForm.intoAccountStatus"
                        placeholder="请选择锁定状态"
                        style="width: 286px"
                      >
                        <el-option label="已出账" value="1"></el-option>
                        <el-option label="未出账" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div>当前页共10项</div>
              </el-col>
              <el-col :span="2">
                <div>
                  <el-button type="primary">查询</el-button>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <el-table
                  :data="khTableData"
                  :cell-style="{ textAlign: 'center' }"
                  :header-cell-style="{ textAlign: 'center' }"
                  border
                  style="width: 100%"
                >
                  <el-table-column fixed prop="collectTime" label="汇总时间" width="150">
                  </el-table-column>
                  <el-table-column
                    fixed
                    prop="networkNameId"
                    label="网点名称"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="intoAccountStatus" label="出账状态" width="120">
                  </el-table-column>
                  <el-table-column prop="settleObject" label="客户名称" width="120">
                  </el-table-column>
                  <el-table-column prop="parentCustomer" label="父客户" width="300">
                  </el-table-column>
                  <el-table-column
                    prop="customerSettlement"
                    label="客户结算英型"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="totalTicket:" label="总票数" width="120">
                  </el-table-column>
                  <el-table-column prop="abnormalTicket" label="异常票数" width="120">
                  </el-table-column>
                  <el-table-column prop="totalweight" label="总重量" width="120">
                  </el-table-column>
                  <el-table-column prop="transportMoney" label="客户运费" width="120">
                  </el-table-column>
                  <el-table-column prop="precharge" label="预收面单费" width="120">
                  </el-table-column>
                  <el-table-column prop="uncharge" label="未收面单费" width="120">
                  </el-table-column>
                  <el-table-column prop="additionFee" label="附加费" width="120">
                  </el-table-column>
                  <el-table-column prop="receivableAmount" label="应收金额" width="120">
                  </el-table-column>
                  <el-table-column prop="totalAmount" label="总金额" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="outOfAccountTicket"
                    label="己出账票数"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="outstandingAccountTicket"
                    label="未出账票数"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="outOfAccountMoney"
                    label="已出账金额"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="costDifferential"
                    label="前后费用差额"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="alreadyReceiveMoney"
                    label="预付款已收金额"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="alreadyReceiveTicket"
                    label="预付款已扣款票数"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="alreadyUncoveredTicket"
                    label="预付款未扣款票数"
                    width="120"
                  >
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: end">
              <el-pagination
                @size-change="khhandleSizeChange"
                @current-change="khhandleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="khtotal"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  getOutletsList,
  getAbnormalList,
  getSettleTypeList,
  getPayTypeList,
  getSettlementTableList,
  settlementSearch,
  getProvinceList,
  getCityId,
  transferMoneySearch,
  salesmanTransferSearch,
  customerFreightCollectSearch,
} from "@/api/dashboard";

export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        currentPage4: 4,
        desc: "",
      },
      // 日期
      Time: [],
      month: "",
      currentPage: 1,
      currentPage2: 1,
      currentPage3: 1,
      currentPage4: 1,
      value1: "",

      mxForm: {
        transportCodes: "",
        networkNameId: "",
        startTime: "",
        endTime: "",
        abnormalDatald: "",
        settleType: "",
        settleObject: "",
        parentCustomer: "",
        networkCompare: "",
        salesman: "",
        customerSettlementId: "",
        orderCustomer: "",
        lockStatus: "",
        effectiveStatus: "",
        receivingNetworkId: "",
        orderNetworkId: "",
        payType: "",
        contractAreaJoin: "",
        toCenter: "",
        leaveCentre: "",
        isSameCity: "",
        destinationProvince: "",
        destinationCity: "",
        minweight: "",
        maxWeight: "",
        isFocusPackageNetwork: "",
        isManualRecord: "",
      },
      cbForm: {
        collectType: "1",
        startTime: "",
        endTime: "",
        month: "",
        networkNameId: "",
        settleObject: "",
        contractAreaJoin: "",
        contractAreaType: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      ywyForm: {
        collectType: "1",
        startTime: "",
        endTime: "",
        month: "",
        networkNameId: "",
        receivingPeople: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      khForm: {
        collectType: "1",
        startTime: "",
        endTime: "",
        month: "",
        networkNameId: "",
        settleObject: "",
        parentCustomer: "",
        customerSettlementId: "",
        intoAccountStatus: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      show: 1,
      mxTableData: [],
      cbTableData: [],
      ywyTableData: [],
      khTableData: [],
      total: 0,
      mxtotal: 0,
      mxpages: {
        pageNum: 1,
        pageSize: 10,
      },

      cbtotal: 0,
      ywytotal: 0,
      khtotal: 0,
      cbpages: {
        pageNum: 1,
        pageSize: 10,
      },
      currentPage: 1,
      tableData: [],
      activeName: "first",
      //网点列表
      networkList: [],
      // 异常数据
      AbnormalList: [],

      // 结算类型列表
      SettleTypeList: [],

      // 付款方式列表
      PayTypeList: [],

      // 省
      ProvinceList: [],

      // 市
      cityList: [],
    };
  },
  created() {
    this.getOutLet();
    this.getAbnormal();
    this.getSettleType();
    this.getPayType();
    this.getMxTab();
    this.getProvince();
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code == 200) {
          this.networkList = res.data;
        }
      });
    },

    // 获取当前日期
    getYesterdayDate() {
      // 获取今天的日期
      const today = new Date();

      // 获取昨天的日期
      const yesterday = new Date(today);
      yesterday.setDate(today.getDate() - 1);

      const startDate = new Date(
        yesterday.getFullYear(),
        yesterday.getMonth(),
        yesterday.getDate(),
        0,
        0,
        0
      ); // 昨天的开始时间

      const endDate = new Date(
        yesterday.getFullYear(),
        yesterday.getMonth(),
        yesterday.getDate(),
        23,
        59,
        59
      ); // 昨天的结束时间

      // 设置时间范围选择器的默认时间范围为昨天
      this.Time = [startDate, endDate];

      this.cbForm.startTime = startDate;
      this.cbForm.endTime = endDate;
    },
    // 获取异常数据列表
    getAbnormal() {
      getAbnormalList().then((res) => {
        if (res.code == 200) {
          this.AbnormalList = res.data;
        }
      });
    },
    // 结算类型列表
    getSettleType() {
      getSettleTypeList().then((res) => {
        if (res.code == 200) {
          this.SettleTypeList = res.data;
        }
      });
    },
    // 付款方式列表
    getPayType() {
      getPayTypeList().then((res) => {
        if (res.code == 200) {
          this.PayTypeList = res.data;
        }
      });
    },
    // 日期转换
    dateChange(value) {
      this.mxForm.startTime = value[0];
      this.mxForm.endTime = value[1];
    },
    // 获取明细表格列表
    getMxTab() {
      getSettlementTableList(this.mxpages.pageNum, this.mxpages.pageSize).then((res) => {
        if (res.code == 200) {
          this.mxTableData = res.data;
          this.mxtotal = res.total;
          this.mxpages = res.pages;
        }
      });
    },
    // 获取承包表格列表
    getCbTab() {
      this.cbSearch();
    },

    // 获取业务员表格列表
    getYwyTab() {
      this.ywySearch();
    },

    // 获取客户表格列表
    getKhTab() {
      this.khSearch();
    },
    // 获取省
    getProvince() {
      getProvinceList().then((res) => {
        if (res.code == 200) {
          this.ProvinceList = res.data;
        }
      });
    },
    // 获取省的id
    provinceChange(value) {
      console.log(value);
      this.mxForm.destinationProvince = value.province;
      this.getCity(value.pid);
    },
    getCity(pid) {
      getCityId(pid).then((res) => {
        if (res.code == 200) {
          this.cityList = res.data;
        }
      });
    },
    // 承包日期根据月.日切换时间选择
    handleDimensionalityChange(newVal) {
      console.log(newVal);
      if (newVal == 1) {
        this.show = 1;
        this.cbForm.month = "";
        this.ywyForm.month = "";
        this.khForm.month = "";
      } else {
        this.show = 2;
        this.cbForm.startTime = "";
        this.cbForm.endTime = "";
        this.ywyForm.startTime = "";
        this.ywyForm.endTime = "";
        this.khForm.startTime = "";
        this.khForm.endTime = "";
      }
    },
    // 承包日期转换
    cbdateChange(value) {
      this.cbForm.startTime = value[0];
      this.cbForm.endTime = value[1];
    },
    // 业务员日期转换
    ywydateChange(value) {
      this.ywyForm.startTime = value[0];
      this.ywyForm.endTime = value[1];
    },
    // 客户日期转换
    khdateChange(value) {
      this.khForm.startTime = value[0];
      this.khForm.endTime = value[1];
    },

    mxSearch() {
      for (const key in this.mxForm) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.mxForm[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.mxForm[key];
        }
      }
      settlementSearch(this.mxForm).then((res) => {
        if (res.code == 200) {
          this.mxTableData = res.data;
          this.mxtotal = res.total;
          this.mxpages = res.pages;
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    cbSearch() {
      for (const key in this.cbForm) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.cbForm[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.cbForm[key];
        }
      }
      transferMoneySearch(this.cbForm).then((res) => {
        if (res.code == 200) {
          this.cbTableData = res.data.data;
          this.cbtotal = res.data.total;
          this.cbForm.pageDate.pageNum = res.data.pages;
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    ywySearch() {
      for (const key in this.ywyForm) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.ywyForm[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.ywyForm[key];
        }
      }
      salesmanTransferSearch(this.ywyForm).then((res) => {
        if (res.code == 200) {
          this.ywyTableData = res.data.data;
          this.ywytotal = res.data.total;
          this.ywyForm.pageDate.pageNum = res.data.pages;
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    // 客户表格
    khSearch() {
      for (const key in this.khForm) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.khForm[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.khForm[key];
        }
      }
      customerFreightCollectSearch(this.khForm).then((res) => {
        if (res.code == 200) {
          this.khTableData = res.data.data;
          this.khtotal = res.data.total;
          this.khForm.pageDate.pageNum = res.data.pages;
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    mxClear() {
      this.mxForm = {};
      this.Time = "";
      this.getMxTab();
    },
    cbClear() {
      this.cbForm = {};
      this.Time = "";
      this.month = "";
      this.getCbTab();
    },
    ywyClear() {
      this.ywyForm = {};
      this.Time = "";
      this.month = "";
      this.getywyTab();
    },
    khClear() {
      this.khForm = {};
      this.Time = "";
      this.month = "";
      this.getkhTab();
    },
    // 切换
    handleClick(tab, event) {
      this.getYesterdayDate();
      this.month = "";
      if (tab.name == "second") {
        this.getCbTab();
      } else if (tab.name == "third") {
        this.getYwyTab();
      } else if (tab.name == "fourth") {
        this.getKhTab();
      }
    },
    mxhandleSizeChange(val) {
      this.mxpages.pageSize = val;
      this.getMxTab();
      console.log(`每页 ${val} 条`);
    },
    mxhandleCurrentChange(val) {
      this.mxpages.pageNum = val;
      this.getMxTab();
      console.log(`当前页: ${val}`);
    },
    cbhandleSizeChange(val) {
      this.cbForm.pageDate.pageSize = val;
      this.getCbTab();
      console.log(`每页 ${val} 条`);
    },
    cbhandleCurrentChange(val) {
      this.cbForm.pageDate.pageNum = val;
      this.getCbTab();
      console.log(`当前页: ${val}`);
    },
    ywyhandleSizeChange(val) {
      this.ywyForm.pageDate.pageSize = val;
      this.getYwyTab();
      console.log(`每页 ${val} 条`);
    },
    ywyhandleCurrentChange(val) {
      this.ywyForm.pageDate.pageNum = val;
      this.getYwyTab();
      console.log(`当前页: ${val}`);
    },
    khhandleSizeChange(val) {
      this.khForm.pageDate.pageSize = val;
      this.getKhTab();
      console.log(`每页 ${val} 条`);
    },
    khhandleCurrentChange(val) {
      this.khForm.pageDate.pageNum = val;
      this.getKhTab();
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  padding: 0px 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.flex-bettom {
  display: flex;
  justify-content: space-between;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
